<template>
	<view class="content">
		<view class="brands">
			<u-navbar :border-bottom="false" title="选择品牌	" title-size="32" title-width="500"></u-navbar>
		  <view class="headtext">
		    最近使用
		  </view>
		  <view class="history">
		    <view class="weiyouchey" v-show="!historylistpp">
		      未有浏览任何车源，快去看看吧...
		    </view>
		    <view class="hisxbox" v-for="(item, index) in historylistpp" :key="index" @tap="searchBrand(item)">
		      <view class="imgbrand">
		        <image :src="'https://files.yzsheng.com/goodimg/brandimg/'+item.bid+'.png'" mode="aspectFit"></image>
		      </view>
		      <view class="histext">{{item.brand}}</view>
		    </view>
		  </view>
		  <scroll-view scroll-y="true" style="height: 76vh;" :scroll-into-view="addtoView">
		    <view class="boxsds">
		      <view v-for="(item, index) in Brandlist" :id="item.initial" :key="item.initial">
		        <view class="abcd">
		          {{item.initial}}
		        </view>
		        <view class="Brandcsss">
		          <view class="list-cell" v-for="(item1, index1) in item.data" :key="index1">
		            <view class="brandcss" @tap="searchBrand(item1)">
		              <view class="iconimgs">
		                <image :src="'https://files.yzsheng.com/goodimg/brandimg/'+item1.bid+'.png'" mode="aspectFit"></image>
		              </view>
		              <view class="area">{{item1.brand}}</view>
		            </view>
		          </view>
		        </view>
		      </view>
		      <view class="floor">
		        <view v-for="(item,index) in indexlist" :data-id="item" :key="index" @tap="addressToView">
		          {{item}}
		        </view>
		      </view>
		    </view>
		  </scroll-view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data(){
			return {
				Brandlist:[],
				indexlist: [],
				addtoView: '', //定位abc
				historylistpp:'',
			}
		},
		created() {
		  this.GetCarBrandList()
		},
		onShow() {
		  this.getHistoryList() //历史记录
		},
		methods:{
			// 品牌接口请求
			async GetCarBrandList() {
			  try {
			    const res = await this.$api.common.GetCarBrandList()
			    this.Brandlist = res.data
			    this.Brandlist.forEach((item, index) => {
			      this.indexlist.push(item.initial)
			    })
			    
			  } catch (err) {
			    
			  }
			},
			addressToView(event) {
			  var id = event.currentTarget.dataset.id
			  this.addtoView = id
			},
			//选择品牌
			searchBrand(type) {
			  // 历史记录
			  let arr = uni.getStorageSync('historypp') || []
			  
			  //历史记录长度不超过5个
			  if (arr.length >= 5) {
			    arr.splice(5, 1) //删除最后一个多余的品牌再加入选择的第一个品牌
			    let index = null
			    //如果有相同的品牌直接删除，排到第一个
			    arr.forEach((item, i) => {
			      if (item.bid === type.bid) {
			        index = i
			      }
			    })
			    if (index !== null) {
			      arr.splice(index, 1) //取消
			    }
			    arr.unshift(type) //排序到第一个
			    uni.setStorageSync('historypp', arr)
			  } else {}
			  this.getHistoryList()
			
			  // 存储品牌
			  uni.$emit('specifAll', {
			    brandlist: type
			  })
				uni.navigateBack({
					delta:1
				})
			},
			//历史搜索列表
			getHistoryList() {
			  uni.getStorage({
			    key: 'historypp',
			    success: res => {
			      this.historylistpp = res.data.slice(0, 5)
			    }
			  })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 20rpx;
	}
	@mixin dingwei() {
		/* 定义flex容器 */
		display: flex;
		/*设置容器内部容器的排列方向*/
		flex-direction: row;
	}
	
	@mixin danhang1() {
		/* 单行...*/
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	@mixin imgsize() {
		width: 100%;
		height: 100%;
	}
	
	@mixin colorbj() {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50rpx;
	}
	
	@mixin shuanghang2() {
		/* 两行...*/
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	// 品牌
	.brands{
	  .headtext {
	  	font-size: 30rpx;
	  	font-family: PingFang SC;
	  	font-weight: 500;
	  	color: rgba(153, 153, 153, 1);
	  }
	  
	  .history {
	  	margin-top: 40rpx;
	  	width: 702rpx;
	  	height: 180rpx;
	  	background: rgba(255, 255, 255, 1);
	  	box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.14);
	  	border-radius: 10rpx;
	  	margin-bottom: 10rpx;
	  	padding: 20rpx;
	  	@include dingwei;
	  }
	  
	  .hisxbox {
	  	width: 132rpx;
	  	text-align: center;
	  
	  	.hisimg {
	  		image {
	  			width: 80rpx;
	  			height: 80rpx;
	  		}
	  	}
	  
	  	.histext {
	  		width: 132rpx;
	  		text-align: center;
	  		font-size: 30rpx;
	  		font-family: PingFang SC;
	  		font-weight: 500;
	  		color: rgba(102, 102, 102, 1);
	  		@include danhang1;
	  	}
	    
	    .imgbrand {
	      image {
	        width: 80rpx;
	        height: 80rpx;
	      }
	    }
	  }
	  
	  .abcd {
	  	padding: 20rpx 0rpx;
	  }
	  .list-cell {
	    box-sizing: border-box;
	    width: 100%;
	    padding: 10rpx 0px 0px 0px;
	    overflow: hidden;
	    color: #323233;
	    font-size: 14px;
	    line-height: 24px;
	    border-bottom: 1px solid #EEEEEE;
	  }
	  .Brandcsss{
	    width: 702rpx;
	    background: #FFFFFF;
	    box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.14);
	    border-radius: 10rpx;
	    padding: 0 20rpx;
	  }
	  .brandcss {
	    display: flex;
	    flex-direction: row;
	  }
	  .area{
	    text-align: left;
	    font-size: 30rpx;
	    font-family: PingFang SC;
	    font-weight: 500;
	    color: rgba(102, 102, 102, 1);
	    line-height: 80rpx;
	    width: 50%;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    overflow: hidden;
	  }
	  
	  .floor {
	  	position: fixed;
	  	top: 400rpx;
	  	right: 40rpx;
	    font-size: 26rpx;
	    font-weight: bold;
	    color: #999999;
	  }
	  
	  .iconimgs {
	    margin-right: 20rpx;
	  	image {
	  		width: 80rpx;
	  		height: 80rpx;
	  	}
	  }
	  .iconimg {
	    margin-right: 20rpx;
	  	image {
	  		width: 80rpx;
	  		height: 80rpx;
	  	}
	  }
	  
	  .weiyouchey {
	  	text-align: center;
	  	font-size: 28rpx;
	  	font-family: PingFang SC;
	  	font-weight: 500;
	  	color: rgba(153, 153, 153, 1);
	  	line-height: 100rpx;
	  	width: 100%;
	  }
	}
</style>
